<template>
  <div class="wsf-page">
    <!-- 顶部状态栏 -->
    <header class="top-bar">
      <!-- 第一行：品牌和口号 -->
      <div class="top-bar-title-row">
        <span class="brand-name-inline">万师傅</span>
        <span class="brand-slogan-inline">价格透明·服务保障</span>
      </div>
      <!-- 第二行：定位+搜索 -->
      <div class="top-bar-row">
        <div class="location">
          <van-icon name="location-o" size="14" />
          <span class="loc-text">定位中...</span>
          <van-icon name="arrow-down" size="12" />
        </div>
        <div class="search-wrap">
          <van-search v-model="searchVal" placeholder="门窗/窗帘/晾衣架" shape="round" background="#fff" class="search-input"
            clearable @search="onSearch" />
          <van-button class="search-btn" color="#FE801C" @click="onSearch">搜索</van-button>
        </div>
      </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-body">
      <!-- 新用户福利 -->
      <section class="card new-user">
        <div class="new-user-top">
          <div class="new-user-left">
            <div class="title">新用户专属福利</div>
            <div class="subtitle">立省288元</div>
          </div>
          <div class="new-user-right">
            <van-button size="small" color="red" @click="claimAll">一键领取</van-button>
          </div>
        </div>

        <div class="coupon-row">
          <div class="coupon" v-for="(c, i) in coupons" :key="i">
            <div class="amount">¥{{ c.amount }}</div>
            <div class="desc">{{ c.desc }}</div>
            <van-button size="mini" color="red" plain @click="claimCouponSingle(i)">领取</van-button>
          </div>
        </div>
      </section>

      <!-- 服务卡片横向排列 -->
      <section class="card services">
        <h3 class="section-title">精选服务</h3>
        <div class="cards-grid">
          <div class="service-card" v-for="(item, idx) in serviceCards" :key="item.title + idx"
            @click="openService(item)">
            <img :src="item.img || placeholderImg" alt="service" class="service-img" />
            <div class="service-title">{{ item.title }}</div>
            <div class="service-price">
              <span class="current-price">{{ item.currentPrice }}</span>
              <span class="original-price">{{ item.originalPrice }}</span>
            </div>
            <van-button size="mini" color="red" class="coupon-btn" @click.stop="claimCouponFor(item)">领券下单</van-button>
          </div>
          <!-- 查看更多按钮 -->
          <div class="more-card" @click="viewMoreServices">
            <div class="more-icon">
              <van-icon name="plus" size="32" />
            </div>
            <div class="more-text">查看更多</div>
          </div>
        </div>
      </section>

      <!-- 功能网格 -->
      <section class="card grid-wrap">
        <!-- 第一行 -->
        <div class="function-grid-row">
          <div class="function-item" v-for="(item, idx) in functionGrid1" :key="'g1-' + idx" @click="onFunction(item)">
            <div class="function-icon">
              <img :src="item.icon" :alt="item.text" />
            </div>
            <div class="function-text">{{ item.text }}</div>
          </div>
        </div>
        <!-- 第二行 -->
        <div class="function-grid-row">
          <div class="function-item" v-for="(item, idx) in functionGrid2" :key="'g2-' + idx" @click="onFunction(item)">
            <div class="function-icon">
              <img :src="item.icon" :alt="item.text" />
            </div>
            <div class="function-text">{{ item.text }}</div>
          </div>
        </div>
        <!-- 第三行 -->
        <div class="function-grid-row">
          <div class="function-item" v-for="(item, idx) in functionGrid3" :key="'g3-' + idx" @click="onFunction(item)">
            <div class="function-icon">
              <img :src="item.icon" :alt="item.text" />
            </div>
            <div class="function-text">{{ item.text }}</div>
          </div>
        </div>
      </section>

      <!-- 合作服务卡片 -->
      <section class="cooperation-cards">
        <div class="cooperation-row">
          <div class="cooperation-card" v-for="(c, i) in cooperations" :key="i" @click="openCooperation(c)">
            <div class="cooperation-content">
              <div class="cooperation-info">
                <div class="cooperation-title">{{ c.title }}</div>
                <div class="cooperation-subtitle">{{ c.subtitle }}</div>
              </div>
              <div class="cooperation-icon">
                <img :src="c.img" :alt="c.title" />
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 横幅卡片区域 -->
      <section class="banner-cards">
        <div class="banner-row">
          <!-- 万能卡专区 -->
          <div class="banner-card banner-card-left" @click="openVipCard">
            <div class="banner-content">
              <div class="banner-title">万能卡专区</div>
              <div class="banner-subtitle">买得多省得多</div>
              <div class="banner-desc">次卡｜万能卡</div>
              <van-button size="small" color="#00a6fb" class="banner-btn">立即抢</van-button>
            </div>
            <div class="banner-character">
              <img :src="vipCardImg" alt="万能卡" />
            </div>
          </div>

          <!-- 会员福利 -->
          <div class="banner-card banner-card-right" @click="openMembership">
            <div class="banner-content">
              <div class="banner-title">加入会员福利享不停</div>
              <div class="banner-benefits">
                <span>月月领60元券</span>
                <span>免费咨询服务</span>
                <span>周周抽奖</span>
                <span>抢券</span>
                <span>积分兑换权益</span>
              </div>
              <van-button size="small" color="#ff4757" class="banner-btn">去享福</van-button>
            </div>
            <div class="banner-vip">
              <img :src="vipBadgeImg" alt="VIP" />
            </div>
          </div>
        </div>
      </section>

      <!-- 服务推广卡片 -->
      <section class="service-promo-cards">
        <div class="promo-row">
          <!-- 匠心修复 -->
          <div class="promo-card promo-card-repair" @click="openRepairService">
            <div class="promo-content">
              <div class="promo-title">匠心修复 重续生活</div>
              <div class="promo-subtitle">维修立减10元</div>
              <van-button size="small" color="#ff6b35" class="promo-btn">立即抢</van-button>
            </div>
            <div class="promo-image">
              <img :src="repairServiceImg" alt="维修服务" />
            </div>
          </div>

          <!-- 趁长假装新房 -->
          <div class="promo-card promo-card-install" @click="openInstallService">
            <div class="promo-content">
              <div class="promo-title">趁长假 装新房</div>
              <div class="promo-subtitle">一站式省心安装</div>
              <van-button size="small" color="#ff6b35" class="promo-btn">立即抢</van-button>
            </div>
            <div class="promo-image">
              <img :src="installServiceImg" alt="安装服务" />
            </div>
          </div>
        </div>
      </section>

      <!-- 1v1客服咨询 -->
      <section class="customer-service">
        <div class="cs-content">
          <div class="cs-avatar">
            <img :src="csAvatarImg" alt="客服" />
            <div class="cs-badge">1v1客服</div>
          </div>
          <div class="cs-text">
            <div class="cs-title">未找到您需要的服务？</div>
          </div>
          <van-button size="small" color="#00a6fb" class="cs-button" @click="contactCustomerService">
            立即联系专属管家
          </van-button>
        </div>
      </section>

      <!-- 热门服务标题 -->
      <section class="hot-services-section">
        <h2 class="hot-services-title">热门服务</h2>

        <!-- 热门服务内容区域 - 两列布局 -->
        <div class="hot-services-content">
          <!-- 左侧轮播图 -->
          <div class="slider-container">
            <div class="slider-wrapper">
              <div class="slider-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
                <div class="slider-slide" v-for="(slide, index) in sliderImages" :key="index">
                  <img :src="slide.image" :alt="slide.title" class="slider-image" />
                  <div class="slider-overlay">
                    <div class="slider-content">
                      <h3 class="slider-title">{{ slide.title }}</h3>
                      <p class="slider-description">{{ slide.description }}</p>
                      <button class="slider-button" @click="handleSliderClick(slide)">
                        {{ slide.buttonText }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 轮播指示器 -->
              <div class="slider-indicators">
                <span v-for="(slide, index) in sliderImages" :key="index"
                  :class="['indicator', { active: index === currentSlide }]" @click="goToSlide(index)"></span>
              </div>
            </div>
          </div>

          <!-- 右侧用户评价图片 -->
          <div class="reviews-grid">
            <div v-for="review in displayReviews" :key="review.id" class="review-card" @click="viewReview(review)">
              <img :src="getReviewImage(review)" :alt="review.title" class="review-image" />
              <div class="review-overlay">
                <div class="review-info">
                  <p class="review-title">{{ review.title }}</p>
                  <div class="review-details">
                    <span class="review-service">{{ review.itemType || '服务' }}</span>
                    <div class="review-rating" v-if="review.rating">
                      <van-rate
                        :model-value="review.rating"
                        :size="12"
                        color="#ffd21e"
                        void-color="rgba(255,255,255,0.3)"
                        readonly
                      />
                    </div>
                  </div>
                </div>
                <div v-if="review.type === 'video'" class="review-play-btn">
                  <van-icon name="play" size="16" color="white" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 用户评价展示区域 -->
      <section class="user-reviews-section">
        <h2 class="reviews-section-title">用户评价</h2>

        <div class="user-reviews-container">
          <div v-for="review in userReviews" :key="review.id" class="user-review-card" @click="viewReview(review)">
            <div class="review-image-container">
              <img :src="review.image" :alt="review.title" class="user-review-image" />
              <div class="review-score-badge">
                <van-icon name="star" size="12" color="#ff6b35" />
                <span class="score-text">{{ review.score }}</span>
              </div>
            </div>
            <div class="review-content-overlay">
              <div class="review-content-info">
                <p class="user-review-title">{{ review.title }}</p>
                <div class="user-basic-info">
                  <div class="user-info-row">
                    <span class="user-name">{{ getUserName() }}</span>
                    <span class="user-phone">{{ getUserPhone() }}</span>
                  </div>
                  <div class="location-info">
                    <van-icon name="location-o" size="10" color="rgba(255, 255, 255, 0.8)" />
                    <span class="review-city">{{ review.city }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 原咨询模块已被1v1客服模块替代 -->
    </main>

    <!-- 底部 Tab 栏 -->
    <van-tabbar v-model="activeTab" @change="onTabbarChange">
      <van-tabbar-item icon="home-o" text="首页" />
      <van-tabbar-item icon="apps-o" text="分类" />
      <van-tabbar-item icon="orders-o" text="订单" />
      <van-tabbar-item icon="user-o"  text="我的" />
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/user.js";
import { getServiceCards, getAvailableCoupons, claimCoupon, claimAllCoupons, getCategories, getAllEvaluations, getHomeUserEvaluations } from "@/api/index.js";
import { getFullImageUrl } from "@/utils/imageUtils.js";
import { showToast, showSuccessToast, showFailToast, closeToast } from 'vant';
import {ElMessage    } from 'element-plus';
import carousel1 from "@/assets/image/carousel1.png";
import carousel2 from "@/assets/image/carousel2.png";
import carousel3 from "@/assets/image/carousel3.png";

// 导入功能图标
import iconInstall from "@/assets/icon/上门安装.jpg";
import iconRepair from "@/assets/icon/专业维修.jpg";
import iconClean from "@/assets/icon/清洗保养.jpg";
import iconHousekeeping from "@/assets/icon/保洁收纳.jpg";
import iconService from "@/assets/icon/便民服务.jpg";
import iconHot from "@/assets/icon/热门服务.jpg";

// 导入合作服务图标
import shortcutIcon1 from "@/assets/shortcut/st1.png";
import shortcutIcon2 from "@/assets/shortcut/st2.png";
import shortcutIcon3 from "@/assets/shortcut/st3.png";

// 导入广告横幅图标
import ad1 from "@/assets/advertisement/ad1.png";
import ad2 from "@/assets/advertisement/ad2.png";
import ad3 from "@/assets/advertisement/ad3.png";
import ad4 from "@/assets/advertisement/ad4.png";

// 导入客服图标
import supportImg from "@/assets/support/support.png";

// 导入轮播图片
import slider1 from "@/assets/slider/s1.png";
import slider2 from "@/assets/slider/s2.png";
import slider3 from "@/assets/slider/s3.png";
import slider4 from "@/assets/slider/s4.png";


// 路由实例
const router = useRouter();

// 用户store实例
const userStore = useUserStore();

// 绑定值
const searchVal = ref("");
const activeTab = ref(0);

// 占位图 - 使用本地默认图片
const placeholderImg = carousel1;

// 服务卡片数据（从API加载）
const serviceCards = ref([]);

// 优惠券数据（从后端获取）
const coupons = ref([]);

// 功能网格数据（从后端获取）
const functionGrid1 = ref([]);
const functionGrid2 = ref([]);
const functionGrid3 = ref([]);

// 评价数据（从后端获取）
const evaluations = ref([]);

const cooperations = ref([
  {
    title: "宜家组装",
    subtitle: "合作平台",
    img: shortcutIcon1,
  },
  {
    title: "企业服务",
    subtitle: "维修保洁",
    img: shortcutIcon2,
  },
  {
    title: "万能卡",
    subtitle: "149任选2项",
    img: shortcutIcon3,
  },
]);

const consultAvatar = supportImg;

// 新增图片资源
const vipCardImg = ad1; // 万能卡专区图标
const vipBadgeImg = ad2; // VIP会员徽章
const repairServiceImg = ad3; // 维修服务图标
const installServiceImg = ad4; // 安装服务图标
const csAvatarImg = supportImg;

// 轮播图数据
const sliderImages = ref([
  {
    id: 1,
    image: slider1,
    title: "专业床体安装",
    description: "师傅经验丰富，安装快速稳固",
    buttonText: "立即预约",
    service: "install",
  },
  {
    id: 2,
    image: slider2,
    title: "柜类安装服务",
    description: "各类柜体专业安装，质量保证",
    buttonText: "了解详情",
    service: "cabinet",
  },
  {
    id: 3,
    image: slider3,
    title: "吸顶灯安装",
    description: "简易吸顶灯快速安装服务",
    buttonText: "预约安装",
    service: "light",
  },
  {
    id: 4,
    image: slider4,
    title: "维修保养",
    description: "专业维修团队，贴心服务",
    buttonText: "联系客服",
    service: "repair",
  },
]);

// 用户评价图片数据（默认数据）
const defaultReviews = ref([
  {
    id: 1,
    image: slider1,
    title: "师傅很专业，安装很仔细",
    phone: "159****0926",
    type: "image",
    itemType: "家电安装",
    rating: 5
  },
  {
    id: 2,
    image: slider2,
    title: "安装过程很顺利",
    phone: "138****2887",
    type: "video",
    itemType: "家具安装",
    rating: 4.5
  },
  {
    id: 3,
    image: slider3,
    title: "师傅态度很好，很满意",
    phone: "186****1234",
    type: "image",
    itemType: "数码维修",
    rating: 5
  },
  {
    id: 4,
    image: slider4,
    title: "修得很好，价格合理",
    phone: "177****5678",
    type: "image",
    itemType: "家电维修",
    rating: 4.8
  },
]);

// 计算显示的评价数据（后端数据 + 默认数据）
const displayReviews = computed(() => {
  const backendReviews = evaluations.value.map(evaluation => {
    // 解析评价内容，提取标题
    const content = evaluation.content || '';
    const titleMatch = content.match(/^([^:：]+)[：:]/);
    const title = titleMatch ? titleMatch[1] : content.substring(0, 20) + '...';

    return {
      id: `eval_${evaluation.evaluationId}`,
      title: title,
      itemType: evaluation.itemType || '服务', // 从额外字段获取，如果没有则显示"服务"
      rating: evaluation.score || 5, // 数据库字段是 score
      type: 'image',
      image: evaluation.imageUrl ? evaluation.imageUrl.split(',')[0] : slider1, // 数据库字段是 imageUrl
      phone: `${evaluation.city || ''}用户`, // 显示城市信息
      isFromBackend: true,
      createTime: evaluation.createTime
    };
  });

  // 合并后端评价和默认评价，最多显示4个
  const allReviews = [...backendReviews, ...defaultReviews.value];
  return allReviews.slice(0, 4);
});

// 轮播图当前索引
const currentSlide = ref(0);

// 用户评价数据
const userReviews = ref([]);

// 方法
function onSearch() {
  // 触发搜索（示例：打印）
  console.log("搜索关键词：", searchVal.value);
}

// 一键领取所有优惠券
async function claimAll() {
  try {
    // 显示加载提示
    showToast({
      type: 'loading',
      message: '正在为您领取优惠券...',
      forbidClick: true,
      duration: 0, // 不自动关闭
      overlay: true,
      overlayStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
      }
    });

    const response = await claimAllCoupons();
    console.log('一键领取响应：', response);

    if (response && response.code === 200) {
      closeToast();
      // 显示成功提示
      showSuccessToast({
        message: response.data || '🎉 恭喜！所有优惠券领取成功！',
        duration: 3000,
        position: 'top',
        className: 'custom-success-toast'
      });
      // 重新加载优惠券数据
      await loadCoupons();
    } else {
      const errorMsg = response?.message || '领取失败，请稍后重试';
      console.log('一键领取失败，错误信息：', errorMsg);
      closeToast();
      // 显示失败提示
      ElMessage.error({
        message: errorMsg,
        duration: 3000,
        showClose: true
      });
    }
  } catch (error) {
    console.log('一键领取异常:', error);
    closeToast();
    ElMessage.error({
      message: '网络异常，请检查网络连接后重试',
      duration: 3000,
      showClose: true
    });
  }
}



// 领取单个优惠券
async function claimCouponSingle(index) {
  try {
    const coupon = coupons.value[index];
    console.log('准备领取优惠券：', coupon);

    if (!coupon || !coupon.couponId) {
      console.log('优惠券信息错误：', coupon);
      ElMessage.error({
        message: '优惠券信息错误，请刷新页面重试',
        duration: 2000,
        showClose: true
      });
      return;
    }

    // 显示加载提示
    showToast({
      type: 'loading',
      message: `正在领取${coupon.couponName || '优惠券'}...`,
      forbidClick: true,
      duration: 0, // 不自动关闭
      overlay: true,
      overlayStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
      }
    });

    const response = await claimCoupon(coupon.couponId);
    console.log('单个优惠券领取响应：', response);

    if (response && response.code === 200) {
      closeToast();
      // 显示成功提示
      showSuccessToast({
        message: response.data || `🎉 ${coupon.couponName || '优惠券'}领取成功！`,
        duration: 2500,
        position: 'top',
        className: 'custom-success-toast'
      });
      // 重新加载优惠券数据
      await loadCoupons();
    } else {
      const errorMsg = response?.message || '领取失败，请稍后重试';
      console.log('单个优惠券领取失败，错误信息：', errorMsg);
      closeToast();
      // 显示失败提示
      ElMessage.error({
        message: errorMsg,
        duration: 3000,
        showClose: true
      });
    }
  } catch (error) {
    console.log('领取优惠券异常:', error);
    closeToast();
    ElMessage.error({
      message: '网络异常，请检查网络连接后重试',
      duration: 3000,
      showClose: true
    });
  }
}

function claimCouponFor(item) {
  console.log("为服务领取券：", item);
}

function openService(item) {
  console.log("打开服务页：", item);

  // 根据服务类型或服务名称跳转到对应页面
  // 这里可以根据实际需求调整跳转逻辑
  if (item.title ) {
    // 跳转到柜类维修页面
    router.push({ name: "cabinetrepair" });
  } else {
    // 默认跳转到柜类维修页面，或者可以跳转到其他相应页面
    router.push({ name: "cabinetrepair" });
  }
}

function onFunction(item) {
  console.log("功能点击：", item);

  // 所有分类图标点击后都跳转到分类页面
  router.push({ 
    name: "category",
    query: {
      categoryName: item.text,
      categoryId: item.id || null,
      categoryType: item.categorytype || null
    }
  });
}

function contactButler() {
  console.log("联系专属管家");
}

function viewMoreServices() {
  console.log("查看更多服务");
  router.push({ name: "viewmore" });
}

function openCooperation(item) {
  console.log("打开合作服务：", item);

  // 如果点击的是"宜家组装"，跳转到宜家安装页面
  if (item.title === "宜家组装") {
    router.push({ name: "ikeaassembly" });
  }
  // 如果点击的是"企业服务"，跳转到企业服务页面
  else if (item.title === "企业服务") {
    router.push({ name: "enterpriseservices" });
  }
  // 如果点击的是"万能卡"，跳转到万能卡页面
  else if (item.title === "万能卡") {
    router.push({ name: "universalcard" });
  }
}

function openVipCard() {
  console.log("打开万能卡专区");
  // router.push({ name: "universalcard" });
}

function openMembership() {
  console.log("打开会员福利");
}

function openRepairService() {
  console.log("打开维修服务");
}

function openInstallService() {
  console.log("打开安装服务");
}

function contactCustomerService() {
  console.log("联系1v1客服");
}

// 底部导航切换处理
function onTabbarChange(index) {
  console.log("底部导航切换到：", index);
  
  switch (index) {
    case 0:
      // 首页 - 当前页面，不需要跳转
      break;
    case 1:
      // 分类页面
      router.push({ name: "category" });
      break;
    case 2:
      // 订单页面
      router.push({ name: "orderPage" });
      break;
    case 3:
      // 我的页面
      router.push({ name: "center" });
      break;
    default:
      console.log("未知的导航索引：", index);
  }
}

// 轮播图方法
function nextSlide() {
  currentSlide.value = (currentSlide.value + 1) % sliderImages.value.length;
}

function prevSlide() {
  currentSlide.value =
    currentSlide.value === 0
      ? sliderImages.value.length - 1
      : currentSlide.value - 1;
}

function goToSlide(index) {
  currentSlide.value = index;
}

// 自动轮播
let autoSlideTimer = null;
function startAutoSlide() {
  autoSlideTimer = setInterval(() => {
    nextSlide();
  }, 3000);
}

function stopAutoSlide() {
  if (autoSlideTimer) {
    clearInterval(autoSlideTimer);
    autoSlideTimer = null;
  }
}

// 加载优惠券数据
async function loadCoupons() {
  try {
    const response = await getAvailableCoupons();
    console.log('优惠券数据加载结果：', response);
    if (response && response.code === 200 && response.data && response.data.length > 0) {
      // 将后端数据映射到前端格式
      coupons.value = response.data.map((coupon) => ({
        couponId: coupon.couponId,
        amount: coupon.amount,
        desc: getDescriptionByCouponType(coupon),
        couponType: coupon.couponType,
        minAmount: coupon.minAmount,
        description: coupon.description,
        couponName: coupon.couponName
      }));
      console.log('优惠券数据映射完成：', coupons.value);
    } else {
      console.log('后端无优惠券数据，使用默认数据');
      // 如果API没有数据，使用默认数据
      coupons.value = [
        { amount: 10, desc: "无使用门槛", couponId: null },
        { amount: 10, desc: "无使用门槛", couponId: null },
        { amount: 68, desc: "满额使用", couponId: null },
      ];
    }
  } catch (error) {
    console.log("加载优惠券失败:", error);
    ElMessage.warning({
      message: '加载优惠券失败，已使用默认数据',
      duration: 2000,
      showClose: true
    });
    // 使用默认数据作为后备
    coupons.value = [
      { amount: 10, desc: "无使用门槛", couponId: null },
      { amount: 10, desc: "无使用门槛", couponId: null },
      { amount: 68, desc: "满额使用", couponId: null },
    ];
  }
}

// 加载用户评价数据
async function loadUserReviews() {
  try {
    const response = await getHomeUserEvaluations();

    console.log('首页评价数据加载结果：', response);

    if (response && response.code === 200 && response.data && response.data.length > 0) {
      userReviews.value = response.data.map((evaluation, index) => {
        // 获取当前用户手机号（脱敏处理）- 使用phonenumber字段
        const userPhone = userStore.phonenumber || '';
        const maskedPhone = userPhone && userPhone.length >= 11 ?
          `${userPhone.slice(0, 3)}****${userPhone.slice(-4)}` :
          `${String(evaluation.userid || '000').slice(-3)}****${String(evaluation.userid || '0000').slice(-4)}`;

        return {
          id: evaluation.evaluationid || index + 1,
          image: evaluation.imageUrl ? getFullImageUrl(evaluation.imageUrl) : carousel1, // 使用评价图片或默认图片
          title: evaluation.content || "用户评价",
          phone: maskedPhone, // 使用当前用户手机号或脱敏处理的用户ID
          type: "image",
          score: evaluation.score || 5,
          city: evaluation.city || "未知城市",
          createTime: evaluation.createtime,
          imageUrl: evaluation.imageUrl // 保存原始图片URL
        };
      });

      console.log('加载首页用户评价成功:', userReviews.value);
    } else {
      console.log('暂无首页评价数据，使用默认数据');
      // 如果没有数据，使用默认的示例数据 - 使用phonenumber字段
      const userPhone = userStore.phonenumber || '';
      const maskedPhone = userPhone && userPhone.length >= 11 ?
        `${userPhone.slice(0, 3)}****${userPhone.slice(-4)}` :
        "159****0926";

      userReviews.value = [
        {
          id: 1,
          image: carousel1,
          title: "师傅很人很负责，真专业",
          phone: maskedPhone,
          type: "image",
          score: 5,
          city: "北京市"
        },
        {
          id: 2,
          image: carousel2,
          title: "很好，师傅很负责任。",
          phone: maskedPhone,
          type: "image",
          score: 5,
          city: "上海市"
        },
        {
          id: 3,
          image: carousel3,
          title: "师傅很负责任的安装，很好",
          phone: maskedPhone,
          type: "image",
          score: 5,
          city: "广州市"
        }
      ];
    }
  } catch (error) {
    console.log('加载首页用户评价失败:', error);
    ElMessage.warning({
      message: '加载用户评价失败，已使用默认数据',
      duration: 2000,
      showClose: true
    });
    // 出错时使用默认数据
    const userPhone = userStore.phone || userStore.username || '';
    const maskedPhone = userPhone ?
      `${userPhone.slice(0, 3)}****${userPhone.slice(-4)}` :
      "159****0926";

    userReviews.value = [
      {
        id: 1,
        image: carousel1,
        title: "师傅很人很负责，真专业",
        phone: maskedPhone,
        type: "image",
        score: 5,
        city: "北京市"
      }
    ];
  }
}

// 根据优惠券类型生成描述
function getDescriptionByCouponType(coupon) {
  if (coupon.description) {
    return coupon.description;
  }

  switch (coupon.couponType) {
    case 1: // 满减券
      return `满${coupon.minAmount}元使用`;
    case 2: // 折扣券
      return `${coupon.amount}折优惠`;
    case 3: // 无门槛券
      return "无使用门槛";
    default:
      return "优惠券";
  }
}

// 加载分类数据
async function loadCategories() {
  try {
    const response = await getCategories();
    console.log('分类数据加载结果：', response);

    if (response && response.code === 200 && response.data && response.data.length > 0) {
      // 将后端数据映射到前端格式
      const categories = response.data.map((category) => ({
        id: category.categoryid,
        icon: getFullImageUrl(category.categoryimage) || iconService, // 使用后端图标，字段名是categoryimage
        text: category.categoryname,
        categoryimage: category.categoryimage,
        categorytype: category.categorytype,
        createtime: category.createtime,
        updatetime: category.updatetime
      }));

      // 将分类数据分配到三行网格中，每行最多5个
      const itemsPerRow = 5;
      functionGrid1.value = categories.slice(0, itemsPerRow);
      functionGrid2.value = categories.slice(itemsPerRow, itemsPerRow * 2);
      functionGrid3.value = categories.slice(itemsPerRow * 2, itemsPerRow * 3);

      console.log('分类数据映射完成：', {
        grid1: functionGrid1.value,
        grid2: functionGrid2.value,
        grid3: functionGrid3.value
      });
    } else {
      console.log('后端无分类数据，使用默认数据');
      // 如果API没有数据，使用默认数据
      loadDefaultCategories();
    }
  } catch (error) {
    console.log("加载分类数据失败:", error);
    ElMessage.warning({
      message: '加载分类数据失败，已使用默认数据',
      duration: 2000,
      showClose: true
    });
    // 使用默认数据作为后备
    loadDefaultCategories();
  }
}

// 加载默认分类数据
function loadDefaultCategories() {
  functionGrid1.value = [
    { icon: iconInstall, text: "上门安装" },
    { icon: iconRepair, text: "专业维修" },
    { icon: iconClean, text: "清洗保养" },
    { icon: iconHousekeeping, text: "保洁收纳" },
    { icon: iconService, text: "便民服务" },
  ];

  functionGrid2.value = [
    { icon: iconInstall, text: "柜子安装" },
    { icon: iconRepair, text: "电路维修" },
    { icon: iconClean, text: "油烟机清洗" },
    { icon: iconHousekeeping, text: "日常保洁" },
    { icon: iconService, text: "管道疏通" },
  ];

  functionGrid3.value = [
    { icon: iconInstall, text: "灯具安装" },
    { icon: iconRepair, text: "空调维修" },
    { icon: iconClean, text: "洗衣机清洗" },
    { icon: iconHousekeeping, text: "深度保洁" },
    { icon: iconHot, text: "全部服务" },
  ];
}

// 加载服务卡片数据
async function loadServiceCards() {
  try {
    const response = await getServiceCards();
    if (response.data && response.data.length > 0) {
      // 将后端数据映射到前端格式，只取前3个用于首页显示
      serviceCards.value = response.data.slice(0, 3).map((service) => ({
        id: service.serviceid,
        img: getFullImageUrl(service.servicepicture),
        image: service.servicepicture,
        title: service.servicename,
        currentPrice: `¥${service.price}`,
        originalPrice: `¥${Math.floor(service.price * 1.2)}`, // 生成原价（比当前价高20%）
        description: service.description,
        categoryid: service.categoryid,
      }));
    } else {
      // 如果API没有数据，使用默认数据
      serviceCards.value = [
        {
          img: carousel1,
          title: "3小时日常保洁",
          currentPrice: "¥115",
          originalPrice: "¥139",
        },
        {
          img: carousel2,
          title: "油烟机半拆清洗",
          currentPrice: "¥109",
          originalPrice: "¥129",
        },
        {
          img: carousel3,
          title: "2台挂式空调清洗",
          currentPrice: "¥115",
          originalPrice: "¥129",
        },
      ];
    }
  } catch (error) {
    console.log("加载服务卡片失败:", error);
    ElMessage.warning({
      message: '加载服务卡片失败，已使用默认数据',
      duration: 2000,
      showClose: true
    });
    // 使用默认数据作为后备
    serviceCards.value = [
      {
        img: carousel1,
        title: "3小时日常保洁",
        currentPrice: "¥115",
        originalPrice: "¥139",
      },
      {
        img: carousel2,
        title: "油烟机半拆清洗",
        currentPrice: "¥109",
        originalPrice: "¥129",
      },
      {
        img: carousel3,
        title: "2台挂式空调清洗",
        currentPrice: "¥115",
        originalPrice: "¥129",
      },
    ];
  }
}

// 加载评价数据
async function loadEvaluations() {
  try {
    const response = await getEvaluations();
    console.log('评价数据加载结果：', response);

    if (response && response.code === 200 && response.data) {
      evaluations.value = response.data;
      console.log('评价数据：', evaluations.value);
    } else {
      console.log('后端无评价数据，使用默认数据');
    }
  } catch (error) {
    console.log("加载评价数据失败:", error);
    ElMessage.warning({
      message: '加载评价数据失败',
      duration: 2000,
      showClose: true
    });
  }
}

// 页面加载时启动自动轮播
onMounted(() => {
  startAutoSlide();
  startSliderAuto();
  loadCategories(); // 加载分类数据
  loadServiceCards(); // 加载服务卡片数据
  loadCoupons(); // 加载优惠券数据
  loadUserReviews(); // 加载用户评价数据
});

onUnmounted(() => {
  stopAutoSlide();
  stopSliderAuto();
});

// 轮播图相关方法

function handleSliderClick(slide) {
  console.log("点击轮播图:", slide.service);
  // 根据不同服务类型跳转到相应页面
  switch (slide.service) {
    case "install":
      openInstallService();
      break;
    case "cabinet":
      console.log("打开柜类安装服务");
      break;
    case "light":
      openCeilingLightService();
      break;
    case "repair":
      openRepairService();
      break;
  }
}

// 获取用户名称
function getUserName() {
  // 从store中获取用户名称（username字段）
  return userStore.username || "匿名用户";
}

// 获取用户手机号（脱敏处理）
function getUserPhone() {
  // 从store中获取手机号（phonenumber字段）
  const phone = userStore.phonenumber || '';
  if (phone && phone.length >= 11) {
    // 手机号脱敏：显示前3位和后4位
    return `${phone.slice(0, 3)}****${phone.slice(-4)}`;
  }
  return "***********"; // 默认脱敏手机号
}

// 用户评价相关方法
function viewReview(review) {
  console.log("查看用户评价:", review);

  // 跳转到评价详情页面，传递评价数据
  router.push({
    name: 'reviewDetails',
    query: {
      id: review.id,
      title: review.title,
      score: review.score,
      city: review.city,
      phone: getUserPhone(),
      userName: getUserName(),
      createTime: review.createTime,
      imageUrl: review.imageUrl || review.image
    }
  });
}

// 获取评价图片
function getReviewImage(review) {
  if (review.isFromBackend && review.image) {
    return review.image;
  }
  return review.image || slider1;
}

// 原有方法
function playVideo() {
  console.log("播放柜类安装视频");
}

function openCeilingLightService() {
  console.log("打开简易吸顶灯安装服务");
}

// 自动轮播
let sliderAutoTimer = null;

function startSliderAuto() {
  sliderAutoTimer = setInterval(() => {
    nextSlide();
  }, 3000); // 3秒切换一次
}

function stopSliderAuto() {
  if (sliderAutoTimer) {
    clearInterval(sliderAutoTimer);
    sliderAutoTimer = null;
  }
}
</script>

<style lang="scss" scoped>
:root {
  --brand-start: #ff7a4d;
  --brand-end: #ff4a1a;
  --page-bg: #f6f7fb;
  --card-bg: #fff;
  --muted: #8b8b8b;
}

/* 动画定义 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.wsf-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}

/* 顶部 */
.top-bar {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ff4757 100%);
  color: #ffffff;
  box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 28px 28px;
  padding: 16px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%);
    pointer-events: none;
  }
}

.top-bar-title-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  animation: fadeInDown 0.6s ease-out;
}

.brand-name-inline {
  font-size: 22px;
  font-weight: 800;
  margin-right: 12px;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.brand-slogan-inline {
  font-size: 14px;
  font-style: normal;
  opacity: 0.95;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.top-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  position: relative;
  z-index: 1;
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }
}

.loc-text {
  font-weight: 600;
}

.search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }
}

.search-input {
  flex: 1;
  min-width: 0;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 40px;
  background: transparent !important;
}

/* 调整 Vant Search 内部样式 */
.search-input {
  :deep(.van-search__content) {
    background: transparent !important;
    border: none !important;
    border-radius: 20px 0 0 20px !important;
    height: 40px !important;
    padding-left: 16px !important;
  }

  :deep(.van-field__control) {
    height: 40px !important;
    font-size: 15px !important;
    color: #333 !important;

    &::placeholder {
      color: #999 !important;
    }
  }
}

.search-btn {
  min-width: 72px;
  height: 40px;
  border-radius: 0 20px 20px 0;
  margin-left: 0;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%) !important;
  border: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);

  &:hover {
    background: linear-gradient(135deg, #ff3742 0%, #ff2837 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
    transform: translateY(-1px);
  }
}

/* 主体 */
.main-body {
  padding: 8px;
  flex: 1;
}

/* 卡片通用 */
.card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 18px rgba(23, 23, 23, 0.04);
  margin-bottom: 8px;
}

/* 新用户 */
.new-user {
  display: block;
  position: relative;
  /* Keep relative for button positioning if needed, though now handled by flex */
}

.new-user-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  /* Space between title/button and coupons */
}

.new-user-left {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.new-user .title {
  font-weight: 700;
  font-size: 16px;
}

.new-user .subtitle {
  font-size: 13px;
  color: var(--muted);
}

/* Removed .new-user-right absolute positioning */

.coupon-row {
  display: flex;
  gap: 8px;
  /* Reduced gap between coupons */
  justify-content: space-between;
  flex-wrap: nowrap;
  /* Ensure coupons stay in one row and don't wrap */
}

.coupon {
  flex: 1;
  /* Distributes space equally */
  min-width: 0;
  /* Allows flex items to shrink below their content size */
  text-align: center;
  padding: 6px 4px;
  /* Smaller padding */
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.8), #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Smaller gap inside coupon */
  box-sizing: border-box;
  /* Include padding in width */

  .amount {
    color: #d43d3d;
    font-weight: 800;
    font-size: 16px;
    /* Smaller font size */
    white-space: nowrap;
    /* Prevent breaking the amount */
  }

  .desc {
    font-size: 11px;
    /* Smaller font size */
    color: var(--muted);
    white-space: nowrap;
    /* Prevent breaking the description */
  }
}

/* van-button size="mini" in template also helps */

/* 服务卡片横向滚动 */
.services .section-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cards-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    height: 4px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.service-card {
  min-width: 160px;
  max-width: 160px;
  background: linear-gradient(180deg, #fff, #fff);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.service-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  background: linear-gradient(90deg, #eee, #f7f7f7);
}

.service-title {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

.service-price {
  font-size: 13px;
  margin-top: 4px;
}

.current-price {
  color: #e84b3a;
  font-weight: 700;
  margin-right: 6px;
}

.original-price {
  color: #9b9b9b;
  text-decoration: line-through;
  font-size: 12px;
}

.coupon-btn {
  margin-top: 6px;
}

/* 查看更多卡片 */
.more-card {
  min-width: 160px;
  max-width: 160px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  transition: all 0.3s ease;
  border: 2px dashed #dee2e6;
  flex-shrink: 0;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-color: var(--brand-start);
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);

    .more-icon {
      color: var(--brand-start);
      transform: scale(1.1);
    }

    .more-text {
      color: var(--brand-start);
    }
  }
}

.more-icon {
  color: #6c757d;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.more-text {
  font-size: 14px;
  color: #6c757d;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* 功能网格 */
.grid-wrap {
  padding: 12px 8px;
}
.function-grid-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.function-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 4px;
  border-radius: 8px;

  &:hover {
    background: rgba(255, 122, 77, 0.1);
    transform: translateY(-2px);

    .function-icon {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(255, 122, 77, 0.3);
    }
  }
}

.function-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.function-text {
  font-size: 12px;
  color: #333;
  text-align: center;
  font-weight: 500;
  line-height: 1.2;
}

/* 合作服务卡片 */
.cooperation-cards {
  padding: 0 8px 8px 8px;
}

.cooperation-row {
  display: flex;
  gap: 8px;
}

.cooperation-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.cooperation-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cooperation-info {
  flex: 1;
  min-width: 0;
  /* 允许文本收缩 */
}

.cooperation-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  white-space: nowrap;
  /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 超出显示省略号 */
}

.cooperation-subtitle {
  font-size: 10px;
  /* 减小字体大小 */
  color: #666;
  white-space: nowrap;
  /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 超出显示省略号 */
}

.cooperation-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.cooperation-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 横幅卡片区域 */
.banner-cards {
  padding: 0 8px 8px 8px;
}

.banner-row {
  display: flex;
  gap: 8px;
}

.banner-card {
  flex: 1;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 100px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  &-left {
    background: #bcf0fc;
    color: white;
  }

  &-right {
    background: #fee7d5;
    color: #333;
  }
}

.banner-content {
  position: relative;
  z-index: 2;
}

.banner-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.banner-subtitle {
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.banner-desc {
  font-size: 12px;
  margin-bottom: 12px;
  opacity: 0.8;
}

.banner-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.banner-benefits span {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

.banner-btn {
  font-size: 12px;
  padding: 6px 12px;
}

.banner-character,
.banner-vip {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.9;
}

.banner-character img,
.banner-vip img {
  width: 80px;
  height: auto;
  border-radius: 8px;
}

/* 服务推广卡片 */
.service-promo-cards {
  padding: 0 8px 8px 8px;
}

.promo-row {
  display: flex;
  gap: 8px;
}

.promo-card {
  flex: 1;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 100px;
  color: white;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  &-repair {
    background: #cc997d;
  }

  &-install {
    background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
  }
}

.promo-content {
  position: relative;
  z-index: 2;
}

.promo-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.promo-subtitle {
  font-size: 14px;
  margin-bottom: 12px;
  opacity: 0.9;
}

.promo-btn {
  font-size: 12px;
  padding: 6px 12px;
}

.promo-image {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

.promo-image img {
  width: 100px;
  height: auto;
  border-radius: 8px;
}

/* 1v1客服咨询 */
.customer-service {
  margin: 0 8px 8px 8px;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  padding-left: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cs-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-avatar {
  position: relative;
  flex-shrink: 0;
  margin-right: 4px;

  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
  }
}

.cs-badge {
  position: absolute;
  top: -5px;
  right: -15px;
  background: #ff4757;
  color: white;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  white-space: nowrap;
  z-index: 3;
}

.cs-text {
  flex: 1;
}

.cs-title {
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.cs-button {
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 热门服务标题 */
.hot-services-section {
  padding: 0 8px;
  margin-bottom: 8px;
}

.hot-services-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
  padding: 8px 0;
}

/* 用户评价展示区域 */
.user-reviews-section {
  padding: 0 8px;
  margin-bottom: 8px;
}

.reviews-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
  padding: 8px 0;
}

.user-reviews-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.user-review-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: 200px;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

.review-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.user-review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-score-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 8px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.score-text {
  font-size: 12px;
  font-weight: 600;
  color: #ff6b35;
}

.review-content-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 20px 16px 16px;
}

.review-content-info {
  color: white;
}

.user-review-title {
  font-size: 14px;
  margin: 0 0 8px 0;
  line-height: 1.4;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-basic-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.user-name {
  font-weight: 600;
  color: #fff;
  background: rgba(255, 107, 53, 0.8);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  backdrop-filter: blur(5px);
}

.user-phone {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.review-city {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
}

/* 热门服务内容区域 - 两列布局 */
.hot-services-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  height: 280px;
  /* 调整高度 */
}

/* 左侧轮播图容器 */
.slider-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

.slider-slide {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 20px 16px 16px;
}

.slider-content {
  color: white;
}

.slider-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.slider-description {
  font-size: 12px;
  margin: 0 0 12px 0;
  opacity: 0.9;
  line-height: 1.4;
}

.slider-button {
  background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
  }
}

.slider-indicators {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background: white;
    transform: scale(1.2);
  }
}

/* 右侧用户评价网格 */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
}

.review-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
  background: #f5f5f5;

  &:hover {
    transform: scale(1.02);
  }
}

.review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 8px 6px 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.review-info {
  flex: 1;
  color: white;
}

.review-title {
  font-size: 10px;
  margin: 0 0 2px 0;
  line-height: 1.2;
  font-weight: 500;
}

.review-phone {
  font-size: 8px;
  opacity: 0.8;
}

.review-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-service {
  font-size: 7px;
  background: rgba(255, 107, 53, 0.8);
  color: white;
  padding: 1px 4px;
  border-radius: 6px;
  align-self: flex-start;
  font-weight: 500;
}

.review-rating {
  display: flex;
  align-items: center;
}

.review-play-btn {
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 咨询模块 */
.consult {
  display: flex;
  align-items: center;
  gap: 12px;
}

.consult-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.consult-body {
  flex: 1;
}

.consult-text {
  font-weight: 700;
}

.consult-sub {
  font-size: 12px;
  color: var(--muted);
}

/* Tabbar 固定在底部（Vant 自带） */
.van-tabbar {
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-bar {
    padding: 14px 16px 18px 16px;
  }

  .brand-name-inline {
    font-size: 20px;
  }

  .brand-slogan-inline {
    font-size: 13px;
    padding: 2px 6px;
  }

  .top-bar-row {
    gap: 12px;
  }

  .location {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* 功能网格响应式 */
  .grid-wrap {
    padding: 10px 6px;
  }

  .function-grid-row {
    margin-bottom: 12px;
  }

  .function-icon {
    width: 42px;
    height: 42px;
  }

  .function-text {
    font-size: 11px;
  }

  /* 响应式卡片 */
  .cooperation-cards,
  .banner-cards,
  .service-promo-cards {
    padding: 0 6px 6px 6px;
  }

  .cooperation-card,
  .banner-card,
  .promo-card {
    padding: 10px;
  }

  .cooperation-title {
    font-size: 13px;
  }

  .cooperation-subtitle {
    font-size: 9px;
  }

  .banner-title,
  .promo-title {
    font-size: 14px;
  }

  .banner-subtitle,
  .promo-subtitle {
    font-size: 12px;
  }

  .customer-service {
    margin: 0 6px 6px 6px;
    padding: 10px;
  }

  .cs-avatar img {
    width: 55px;
    height: 55px;
  }

  .cs-title {
    font-size: 14px;
  }

  .banner-character img,
  .banner-vip img {
    width: 70px;
  }

  .promo-image img {
    width: 85px;
  }
}

@media (max-width: 480px) {
  .top-bar {
    padding: 12px 14px 16px 14px;
    border-radius: 0 0 20px 20px;
  }

  .top-bar-title-row {
    margin-bottom: 6px;
  }

  .brand-name-inline {
    font-size: 18px;
  }

  .brand-slogan-inline {
    font-size: 12px;
  }

  .top-bar-row {
    /* 保持横向排列，不改为垂直 */
    gap: 8px;
  }

  .location {
    padding: 6px 8px;
    font-size: 12px;
    min-width: fit-content;
  }

  .search-wrap {
    flex: 1;
    min-width: 0;
  }

  .search-input {
    height: 38px;
  }

  .search-btn {
    height: 38px;
    min-width: 60px;
    font-size: 14px;
  }

  .search-input :deep(.van-search__content) {
    height: 38px !important;
  }

  .search-input :deep(.van-field__control) {
    height: 38px !important;
    font-size: 14px !important;
  }

  /* 小屏幕服务卡片调整 */
  .cards-grid {
    gap: 10px;
  }

  .service-card,
  .more-card {
    min-width: 140px;
    max-width: 140px;
  }

  .service-img {
    height: 80px;
  }

  .service-title {
    font-size: 13px;
  }

  .more-card {
    min-height: 140px;
  }

  .more-text {
    font-size: 12px;
  }

  /* 小屏幕功能网格 */
  .grid-wrap {
    padding: 8px 4px;
  }

  .function-grid-row {
    margin-bottom: 10px;
  }

  .function-item {
    padding: 6px 2px;
  }

  .function-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
  }

  .function-text {
    font-size: 10px;
  }

  /* 小屏幕卡片调整 */
  .cooperation-cards,
  .banner-cards,
  .service-promo-cards {
    padding: 0 4px 4px 4px;
  }

  .cooperation-card,
  .banner-card,
  .promo-card {
    padding: 8px;
  }

  .cooperation-title {
    font-size: 12px;
  }

  .cooperation-subtitle {
    font-size: 8px;
  }

  .banner-title,
  .promo-title {
    font-size: 13px;
  }

  .banner-subtitle,
  .promo-subtitle {
    font-size: 11px;
  }

  .banner-benefits span {
    font-size: 9px;
    padding: 1px 4px;
  }
  .customer-service {
    margin: 0 4px 4px 4px;
    padding: 8px;
  }
  .cs-avatar img {
    width: 50px;
    height: 50px;
  }
  .cs-title {
    font-size: 12px;
  }
  .banner-character img,
  .banner-vip img {
    width: 60px;
  }
  .promo-image img {
    width: 75px;
  }

  /* 用户评价小屏幕响应式 */
  .user-reviews-section {
    padding: 0 4px;
    margin-bottom: 4px;
  }

  .reviews-section-title {
    font-size: 16px;
    padding: 6px 0;
  }

  .user-reviews-container {
    gap: 8px;
  }

  .user-review-card {
    height: 160px;
  }

  .user-review-title {
    font-size: 12px;
  }

  .user-info-row {
    font-size: 10px;
  }

  .user-name {
    font-size: 9px;
    padding: 1px 5px;
  }

  .user-phone {
    font-size: 9px;
  }

  .location-info {
    font-size: 9px;
  }

  .review-city {
    font-size: 9px;
  }

  .review-score-badge {
    top: 8px;
    right: 8px;
    padding: 3px 6px;
  }

  .score-text {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .top-bar {
    padding: 10px 12px 14px 12px;
  }
  .brand-name-inline {
    font-size: 16px;
  }
  .top-bar-row {
    gap: 6px;
  }
  .location {
    padding: 4px 6px;
    font-size: 11px;
    min-width: fit-content;
  }

  .loc-text {
    display: none;
    /* 在超小屏幕隐藏"定位中..."文字，只保留图标 */
  }

  .search-input {
    height: 36px;
  }
  .search-btn {
    height: 36px;
    min-width: 50px;
    font-size: 12px;
  }
  .search-input :deep(.van-search__content) {
    height: 36px !important;
    padding-left: 12px !important;
  }

  .search-input :deep(.van-field__control) {
    height: 36px !important;
    font-size: 13px !important;
  }

  /* 超小屏幕服务卡片调整 */
  .cards-grid {
    gap: 8px;
  }
  .service-card,
  .more-card {
    min-width: 120px;
    max-width: 120px;
  }
  .service-img {
    height: 70px;
  }
  .service-title {
    font-size: 12px;
  }
  .service-price {
    font-size: 11px;
  }
  .more-card {
    min-height: 120px;
  }
  .more-text {
    font-size: 11px;
  }

  /* 超小屏幕功能网格 */
  .grid-wrap {
    padding: 6px 3px;
  }
  .function-grid-row {
    margin-bottom: 8px;
  }
  .function-item {
    padding: 4px 1px;
  }
  .function-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
  }
  .function-text {
    font-size: 9px;
  }
}

/* 375×667移动端专门适配 */
@media (max-width: 375px) and (max-height: 667px) {
  .customer-service {
    margin: 0 6px 6px 6px;
    padding: 10px 6px;
  }
  .cs-content {
    gap: 10px;
  }
  .cs-avatar {
    flex-shrink: 0;
  }
  .cs-avatar img {
    width: 50px;
    height: 50px;
  }
  .cs-badge {
    top: -3px;
    right: -12px;
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 6px;
  }
  .cs-title {
    font-size: 13px;
    line-height: 1.3;
  }
  .cs-button {
    font-size: 11px;
    padding: 6px 8px;
    min-width: 70px;
    border-radius: 16px;
  }
  .hot-services-section {
    padding: 0 6px;
    margin-bottom: 6px;
  }

  .hot-services-title {
    font-size: 16px;
  }

  /* 热门服务响应式 */
  .hot-services-content {
    grid-template-columns: 1fr;
    gap: 12px;
    height: 500px; /* 调整高度适应单列布局 */
  }

  .slider-container {
    height: 200px;
  }

  .slider-title {
    font-size: 14px;
  }

  .slider-description {
    font-size: 11px;
  }

  .slider-button {
    font-size: 10px;
    padding: 6px 12px;
  }

  .reviews-grid {
    height: 280px;
  }

  .review-title {
    font-size: 9px;
  }

  .review-phone {
    font-size: 7px;
  }

  .review-play-btn {
    width: 16px;
    height: 16px;
  }

  /* 用户评价响应式 */
  .user-reviews-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .user-review-card {
    height: 180px;
  }

  .user-review-title {
    font-size: 13px;
  }

  .user-info-row {
    font-size: 11px;
  }

  .user-name {
    font-size: 10px;
    padding: 2px 6px;
  }

  .user-phone {
    font-size: 10px;
  }

  .location-info {
    font-size: 10px;
  }

  .review-city {
    font-size: 10px;
  }
}

/* Toast 自定义样式 */
:deep(.van-toast) {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
  max-width: 90% !important;
  word-wrap: break-word !important;
  animation: toastSlideIn 0.3s ease-out !important;
}

/* 成功Toast样式 */
:deep(.van-toast--success) {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 2px solid #22c55e !important;
  color: #15803d !important;
}

:deep(.van-toast--success .van-toast__text) {
  color: #15803d !important;
  font-weight: 600 !important;
}

:deep(.van-toast--success .van-toast__icon) {
  color: #22c55e !important;
}

/* 失败Toast样式 */
:deep(.van-toast--fail) {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: 2px solid #ef4444 !important;
  color: #dc2626 !important;
}

:deep(.van-toast--fail .van-toast__text) {
  color: #dc2626 !important;
  font-weight: 600 !important;
}

:deep(.van-toast--fail .van-toast__icon) {
  color: #ef4444 !important;
}

/* 加载Toast样式 */
:deep(.van-toast--loading) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 2px solid #64748b !important;
  color: #475569 !important;
}

:deep(.van-toast--loading .van-toast__text) {
  color: #475569 !important;
  font-weight: 600 !important;
}

:deep(.van-toast--loading .van-loading__spinner) {
  color: #64748b !important;
}

/* 自定义成功Toast样式类 */
.custom-success-toast {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 2px solid #22c55e !important;
  color: #15803d !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2) !important;
}

/* 自定义失败Toast样式类 */
.custom-fail-toast {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: 2px solid #ef4444 !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2) !important;
}

/* Toast动画效果 */
@keyframes toastSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastSlideOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* Toast位置调整 */
:deep(.van-toast--top) {
  top: 20% !important;
}

/* 响应式Toast样式 */
@media (max-width: 480px) {
  :deep(.van-toast) {
    font-size: 14px !important;
    padding: 14px 18px !important;
    max-width: 95% !important;
  }

  :deep(.van-toast--top) {
    top: 15% !important;
  }
}
</style>
